<div class="panel-login-container">
  <form (submit)="onLogin()"
    [formGroup]="signinForm">
    <div formGroupName="userData">
      <div class="rows">
        <div class="input-group">
          <i class="iconfont input-group-addon">&#xe74f;</i>
          <input type="text" class="form-control" name="username"
                 formControlName="userName"
                 placeholder="邮箱／用户名／已验证手机" />
        </div>
        <div class="error-messages"
             *ngIf="!signinForm.get('userData.userName').valid && signinForm.get('userData.userName').touched && signinForm.get('userData.userName').errors">
              <span
                *ngIf="signinForm.get('userData.userName').errors['required']">
                请填写您的用户名
              </span>
          <span
            *ngIf="signinForm.get('userData.userName').errors['userNameStrength']">
                用户名的长度是4-20位
              </span>
        </div>
      </div>
      <div class="rows">
        <div class="input-group">
          <i class="iconfont input-group-addon">&#xe61a;</i>
          <input type="password" class="form-control"
                 formControlName="password"
                 name="password" placeholder="密码"/>
        </div>
        <div class="error-messages"
             *ngIf="!signinForm.get('userData.password').valid && signinForm.get('userData.password').touched">
              <span
                *ngIf="signinForm.get('userData.password').errors['required']">
                请填写您的密码
              </span>
          <span
            *ngIf="signinForm.get('userData.password').errors['passwordIntensity']">
                密码的长度是6-20位，包含字母数字和下划线
              </span>
        </div>
      </div>
    </div>
    <div class="forget-pass">
      <a href="">忘记密码</a>
    </div>
    <div class="input-group-a">
      <button type="submit" [disabled]="signinForm.invalid || !signinForm.valid && signinForm.touched" class="btn btn-danger btn-block form-login">登   录</button>
    </div>
  </form>
</div>
